<template>
  <div>
    <el-dialog
      title="图片预览"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handledialogClose"
    >
      <!-- <span>这是一段信息</span> -->
      <el-image :src="dialogVisibleSrc">
      </el-image>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span> -->
    </el-dialog>
    <!-- 上传文件对话框 -->
    <el-dialog
      title="上传文件"
      :visible.sync="uploadDialogVisible"
      width="50%"
      :before-close="handleUploadDialogClose"
    >
      <Upload @uploadSuccess="handleUploadSuccess" :url="uploadUrl" ref="uploadElement"></Upload>
    </el-dialog>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="图片管理" name="pictureManage">
        <el-row>
          <el-col :span="4" style="padding-left: 1em">
            <el-date-picker
              v-model="searchDate"
              type="month"
              placeholder="请选择要查找的月"
              format="yyyy 年 MM 月 "
              value-format="yyyy-MM"
              style="width: 100%; min-width: 200px"
            >
            </el-date-picker>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="handleSearch">查找</el-button>
            <el-button type="primary" @click="handleUpload">上传文件</el-button>
          </el-col>
        </el-row>
        <el-row
          :gutter="10"
          class="pictureManagePanel"
          type="flex"
          justify="start"
          style="flex-wrap: wrap; flex-direction: row"
        >
          <el-col :span="4" v-for="item in sources" :key="item.sId">
            <picture-card
              :data="item"
              @handlePreview="handlePreviewOn"
              @deleteSingleSource="handleDeleteSingleSource"
            ></picture-card>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[18, 24, 30, 36]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="音频管理" name="audioManage">音频管理</el-tab-pane>
      <el-tab-pane label="视频管理" name="vidioManage">视频管理</el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import PictureCard from "@/components/PictureCard.vue";
import { getSourceListPage,removeSource } from "@/api/api";
import Upload from "@/components/Upload/Upload.vue";
import { siteUrl } from "@/api/constTools";
// import Upload from "@/components/Upload/Upload.vue";
export default {
  components: { PictureCard, Upload, Upload },
  data() {
    return {
      activeName: "pictureManage",
      data: {
        sId: 0,
        sPath:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        sUpdateTime: "2022-10-07",
        sName: "这里是图片名称这里是图片名称",
      },
      searchDate: null,
      sType: 0,
      // 分页
      page: 1,
      total: 0,
      size: 18,
      sources: [],

      // 图片预览
      dialogVisible:false,
      dialogVisibleSrc:"",

      // 上传文件对话框
      uploadDialogVisible:false,
      uploadUrl:siteUrl+"api/source"
    };
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    handleSearch() {
      // this.$message.info("search");
      this.getSources();
    },
    handleUpload() {
      // this.$message.info("upload");
      this.uploadDialogVisible=true;
    },
    handleUploadSuccess(){
      this.getSources();//上传成功后再一次更新数据
    },
    getSources() {
      let para = {
        pageIndex: this.page,
        pageSize: this.size,
        searchDate: this.searchDate,
        sType: this.sType,
        // key: this.filters.name
      };
      // this.listLoading = true;

      //NProgress.start();
      getSourceListPage(para).then((res) => {
        // console.log(res.data);
        this.sources = res.data.data;
        this.total = res.data.dataCount;
        // console.log(this.sources);
        // this.listLoading = false;
        //NProgress.done();
      });
    },
    handlePreviewOn(val) {
      // this.$message.info("receive from child");
      // console.log(val);
      // 显示遮罩层，将val传入并进行图片显示
      this.dialogVisible=true;
      this.dialogVisibleSrc=val;
    },
    handledialogClose(){
      this.dialogVisible=false;
    },
    handleUploadDialogClose(){
      this.uploadDialogVisible=false;
      // 关闭对话框后要清空已上传文件队列
      this.$refs["uploadElement"].clearFiles();
    },
    //分页事件
    handleSizeChange(val){
      this.size=val;
     this.getSources(); 
    },
    handleCurrentChange(val){
      this.page=val;
     this.getSources();
    },
    // 删除指定对象
    handleDeleteSingleSource(val){
      //  console.log(val);
       this.$confirm("确认删除该记录吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          //NProgress.start();
          let para = { sId: val };
          // const index = this.categories.findIndex((v) => v.cID === row.cID) 此处还是考虑不用vue的动态更新，因为有可能删除一个父类之后其子类也一并被删除，单独找一个index删除时就无法将子类一并删除
          // console.log(index);
          removeSource(para).then(res => {
            // console.log(res);
            //NProgress.done();
            if (res.data.success) {
              this.$message({
                message: "删除成功",
                type: "success"
              });
              // this.categories.splice(index, 1);//从列表中删除对应项
              this.getSources();
            } else {
              this.$message({
                message: res.data.msg,
                type: "error"
              });
            }
            
            // this.getPermissions();
          });
        })
        .catch(() => {})
    }
  },
  mounted() {
    this.getSources();
  },
};
</script>
  
<style scoped>
.pictureManagePanel {
  width: 100%;
  height: max-content;
  /* border: 3px solid paleturquoise; */
  padding: 10px 0%;
}
</style>
